/* ============================================================
   AiComply / NavigateCyber — Design Tokens
   ============================================================ */

:root {
  /* -------- CORE BRAND -------- */
  --ac-blue-main:       #254267;  /* primary brand blue */
  --ac-blue-secondary:  #355e93;  /* secondary blue */
  --ac-blue-deep:       #15263b;  /* deepest blue / surface */
  --ac-blue-mid:        #254166;
  --ac-blue-slate:      #435162;
  --ac-blue-mist:       #718eb3;
  --ac-blue-fog:        #c2cede;

  --ac-red:             #A21015;  /* accent red */
  --ac-red-deep:        #49080C;
  --ac-red-soft:        #C8232A;  /* derived hover */

  --ac-teal:            #00E5E5;  /* digital teal */
  --ac-teal-mid:        #00B2B2;
  --ac-teal-deep:       #007F7F;
  --ac-teal-pale:       #B2FFFF;

  --ac-neutral-900:     #0B1320;
  --ac-neutral-800:     #1A2233;
  --ac-neutral-700:     #2A3344;
  --ac-neutral-600:     #435162;
  --ac-neutral-500:     #6C7785;
  --ac-neutral-400:     #888888;
  --ac-neutral-300:     #A1A8B0;
  --ac-neutral-200:     #C9CFD7;
  --ac-neutral-150:     #DFDFDF;
  --ac-neutral-100:     #ECEFF3;
  --ac-neutral-50:      #F5F7FA;
  --ac-neutral-0:       #FFFFFF;

  /* -------- SEMANTIC -------- */
  --ac-success:         #1E8E55;
  --ac-success-bg:      #E6F4ED;
  --ac-warning:         #B47A00;
  --ac-warning-bg:      #FBF3DF;
  --ac-danger:          #A21015;
  --ac-danger-bg:       #FBE6E7;
  --ac-info:            #355e93;
  --ac-info-bg:         #E8EEF6;
  --ac-ai:              #6B4FE0;       /* AI / automation indicator */
  --ac-ai-bg:           #ECE7FB;

  /* -------- SURFACES (LIGHT) -------- */
  --ac-bg-canvas:       #F5F7FA;
  --ac-bg-surface:      #FFFFFF;
  --ac-bg-sunken:       #ECEFF3;
  --ac-bg-raised:       #FFFFFF;
  --ac-bg-inverse:      #15263b;
  --ac-border-subtle:   #E3E7ED;
  --ac-border-default:  #C9CFD7;
  --ac-border-strong:   #A1A8B0;
  --ac-fg-primary:      #0B1320;
  --ac-fg-secondary:    #435162;
  --ac-fg-muted:        #6C7785;
  --ac-fg-inverse:      #FFFFFF;
  --ac-fg-brand:        #254267;
  --ac-fg-link:         #007F7F;

  /* -------- DATA VIZ -------- */
  --ac-data-1: #254267;
  --ac-data-2: #00B2B2;
  --ac-data-3: #6B4FE0;
  --ac-data-4: #B47A00;
  --ac-data-5: #1E8E55;
  --ac-data-6: #355e93;
  --ac-data-7: #A21015;
  --ac-data-8: #718eb3;

  /* -------- TYPOGRAPHY -------- */
  --ac-font-display: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --ac-font-sans:    "Roboto", "Helvetica Neue", Arial, sans-serif;
  --ac-font-mono:    "IBM Plex Mono", "JetBrains Mono", "Courier New", monospace;

  /* Type scale (rem) */
  --ac-fs-12: 0.75rem;
  --ac-fs-13: 0.8125rem;
  --ac-fs-14: 0.875rem;
  --ac-fs-15: 0.9375rem;
  --ac-fs-16: 1rem;
  --ac-fs-18: 1.125rem;
  --ac-fs-20: 1.25rem;
  --ac-fs-24: 1.5rem;
  --ac-fs-28: 1.75rem;
  --ac-fs-32: 2rem;
  --ac-fs-40: 2.5rem;
  --ac-fs-48: 3rem;
  --ac-fs-64: 4rem;

  /* Line heights */
  --ac-lh-tight:   1.1;
  --ac-lh-snug:    1.25;
  --ac-lh-normal:  1.4;
  --ac-lh-relaxed: 1.55;

  /* -------- SPACING (4pt base, dense-UI friendly) -------- */
  --ac-sp-0:  0;
  --ac-sp-1:  2px;
  --ac-sp-2:  4px;
  --ac-sp-3:  8px;
  --ac-sp-4:  12px;
  --ac-sp-5:  16px;
  --ac-sp-6:  20px;
  --ac-sp-7:  24px;
  --ac-sp-8:  32px;
  --ac-sp-9:  40px;
  --ac-sp-10: 48px;
  --ac-sp-11: 64px;
  --ac-sp-12: 80px;
  --ac-sp-13: 96px;
  --ac-sp-14: 128px;

  /* -------- RADIUS (sharp / federal) -------- */
  --ac-rad-0: 0;
  --ac-rad-1: 2px;
  --ac-rad-2: 4px;
  --ac-rad-3: 6px;
  --ac-rad-4: 8px;
  --ac-rad-pill: 999px;

  /* -------- ELEVATION -------- */
  --ac-shadow-1: 0 1px 2px rgba(11, 19, 32, 0.06), 0 1px 1px rgba(11, 19, 32, 0.04);
  --ac-shadow-2: 0 2px 4px rgba(11, 19, 32, 0.06), 0 4px 8px rgba(11, 19, 32, 0.06);
  --ac-shadow-3: 0 8px 16px rgba(11, 19, 32, 0.08), 0 4px 6px rgba(11, 19, 32, 0.04);
  --ac-shadow-4: 0 24px 48px rgba(11, 19, 32, 0.18), 0 8px 16px rgba(11, 19, 32, 0.10);
  --ac-shadow-focus: 0 0 0 3px rgba(0, 178, 178, 0.35);

  /* -------- LAYOUT -------- */
  --ac-container-narrow: 768px;
  --ac-container-base:   1184px;
  --ac-container-wide:   1440px;
  --ac-gutter:           24px;
  --ac-sidebar-w:        272px;

  /* -------- MOTION -------- */
  --ac-dur-instant: 80ms;
  --ac-dur-fast:    160ms;
  --ac-dur-base:    220ms;
  --ac-dur-slow:    360ms;
  --ac-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ac-ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --ac-ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* -------- Z -------- */
  --ac-z-base:   1;
  --ac-z-nav:    100;
  --ac-z-overlay:900;
  --ac-z-modal:  1000;
  --ac-z-toast:  1100;
}

/* -------- DARK SURFACE TOKENS -------- */
.ac-dark {
  --ac-bg-canvas:      #0B1320;
  --ac-bg-surface:     #15263b;
  --ac-bg-sunken:      #0F1B2C;
  --ac-bg-raised:      #1B2D47;
  --ac-bg-inverse:     #FFFFFF;
  --ac-border-subtle:  #1F324C;
  --ac-border-default: #2B4163;
  --ac-border-strong:  #435162;
  --ac-fg-primary:     #ECEFF3;
  --ac-fg-secondary:   #C2CEDE;
  --ac-fg-muted:       #718EB3;
  --ac-fg-inverse:     #0B1320;
  --ac-fg-brand:       #C2CEDE;
  --ac-fg-link:        #00E5E5;
  --ac-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ac-shadow-2: 0 4px 8px rgba(0, 0, 0, 0.45);
  --ac-shadow-3: 0 8px 16px rgba(0, 0, 0, 0.55);
  --ac-shadow-4: 0 24px 48px rgba(0, 0, 0, 0.65);
}